<template>
  <div class="wechat-platform-info">
    <el-form class="platform-form-box-two" ref="disForm" label-position="left" label-width="110px" :model="formData">
      <div class="title-two">
        {{$t('configLazyLoad.channel.wexinTip103')}}
      </div>
      <el-form-item :label="$t('configLazyLoad.channel.wexinTip104')" prop="server_url" style="padding: 0 80px;">
        <el-input v-model.trim="formData.server_url" class="platform-two-input" :disabled="true"></el-input>
        <el-tooltip class="platform-two-tooltip" :content="$t('public.copy')" placement="bottom">
          <i class="quickCopy iconfont icon-fuzhi" @click="copy('server_url')"></i>
        </el-tooltip>
      </el-form-item>
      <div class="title-two">
        {{$t('configLazyLoad.channel.wexinTip105')}}
      </div>
      <el-form-item :label="$t('configLazyLoad.channel.wexinTip106')" prop="token" style="padding: 0 80px;">
        <el-input v-model.trim="formData.token" class="platform-two-input" :disabled="true"></el-input>
        <el-tooltip class="platform-two-tooltip" :content="$t('public.copy')" placement="bottom">
          <i class="quickCopy iconfont icon-fuzhi" @click="copy('token')"></i>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="EncodingAESKey：" prop="encoding_AESKey" style="padding: 0 80px;">
        <el-input v-model.trim="formData.encoding_AESKey" class="platform-two-input" :disabled="true"></el-input>
        <el-tooltip class="platform-two-tooltip" :content="$t('public.copy')" placement="bottom">
          <i class="quickCopy iconfont icon-fuzhi" @click="copy('encoding_AESKey')"></i>
        </el-tooltip>
      </el-form-item>
      <div class="title-two">
        {{$t('configLazyLoad.channel.wexinTip107')}}
      </div>
      <div class="title-two">
        {{$t('configLazyLoad.channel.wexinTip108')}}
      </div>
      <div v-for="(item, index) in formData.ipList">
        <el-form-item :label="$t('configLazyLoad.channel.wexinTip109')"  style="padding: 0 80px;">
          <el-input v-model="formData.ipList[index]" class="platform-two-input" :disabled="true"></el-input>
          <el-tooltip class="platform-two-tooltip" :content="$t('public.copy')" placement="bottom">
            <i class="quickCopy iconfont icon-fuzhi" @click="copy({type: 'ipList', index: index})"></i>
          </el-tooltip>
        </el-form-item>
      </div>
      <div class="title-two">
        {{$t('configLazyLoad.channel.wexinTip110')}}
      </div>
      <el-form-item :label="$t('configLazyLoad.channel.wexinTip111')" style="padding: 0 80px;">
        <el-input v-model.trim="wechatUrl" class="platform-two-input" :disabled="true"></el-input>
        <el-tooltip class="platform-two-tooltip" :content="$t('public.copy')" placement="bottom">
          <i class="quickCopy iconfont icon-fuzhi" @click="copy('wechatUrl')"></i>
        </el-tooltip>
      </el-form-item>
      <div class="remark">
        {{$t('configLazyLoad.channel.wexinTip112')}}
      </div>
    </el-form>
    <div class="btn" v-if="todoType === 'add'">
      <el-button class="primary_btn" style="margin-right: 20px" @click="cancelType(2)">{{$t('config.channel.prevStep')}}</el-button>
      <el-button type="primary" class="primary_btn" @click="nextStep(2)">{{$t('public.save')}}</el-button>
    </div>
  </div>
</template>
<script>
  import Clipboard from 'clipboard-js'
  export default{
    name: 'wechatPlatformInfo',
    data () {
      return {}
    },
    props: ['formData', 'todoType', 'wechatUrl'],
    methods: {
      copy (data) {
        let self = this
        if (typeof data === 'string') {
          if (data === 'wechatUrl') {
            Clipboard.copy(this.wechatUrl).then(
              function () {
                self.$message.success(this.$t('config.business.copySuccess'))
              }
            )
          } else {
            Clipboard.copy(this.formData[data]).then(
              function () {
                self.$message.success(this.$t('config.business.copySuccess'))
              }
            )
          }
        } else {
          if (data.type === 'ipList') {
            Clipboard.copy(this.formData.ipList[data.index]).then(
              function () {
                self.$message.success(this.$t('config.business.copySuccess'))
              }
            )
          }
        }
      },
      nextStep (step) {
        this.$emit('next', {step: step, data: this.formData})
      },
      cancelType (step) {
        this.$emit('cancel', step)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .platform-form-box-two
    width 800px
    margin 0 auto
  .title-two
    text-align left
    font-size 18px
    margin 20px 0
  .quickCopy
    cursor pointer
    color $c-main
  .platform-two-input
    width calc(100% - 40px)
  .platform-two-tooltip
    margin-left 10px
  .btn
    margin 20px
    text-align center
  .new_wechat_modify
    .btn
      display none
  .remark
    color #3b5998
    font-size 12px
</style>